import React from 'react';
import { sleep } from 'antd-mobile/es/utils/sleep'
const GuestIndex = () => {
    const [hasMore, SethasMore] = React.useState(false)
    const [page, SetPage] = React.useState(1)
    const [list, SetList] = React.useState([])

    React.useEffect(() =>{
        GetGuestData();
    },[])

    const OnRefresh = async() => 
    {
        SetPage(1)
        SetList([])
        SethasMore(true)

        await sleep(1000);
        await GetGuestData();
    }
    const loadMore = async() => 
    {
        await sleep(1000)
        GetGuestData()
    }

    const GetGuestData = async() =>
    {
        let result = await React.HTTP.post('/guest/index', {
            busid: React.Business.id,
            page: page
        })

        if(result.code == 0)
        {
            //没有更多数据
            SethasMore(false);
            return false
        }
        else
        {
            //设置分页和列表合并
            SethasMore(true)
            SetList(list.concat(result.data))
            SetPage(page + 1)
        }
    }

    // 按扭
    const rightBtn= [
      {
        key: 'delete',
        text: '删除',
        color: 'danger',
      },
    ]

    // 删除
    const GuestDelete = (gid: number) => {
        React.UI.Dialog.confirm({
            title: '删除',
            content: '是否确认删除住客信息?',
            onConfirm: async () => 
            {
                let result = await React.HTTP.post("/guest/del", {
                    busid: React.Business.id,
                    gid: gid
                })

                if(result.code == 1)
                {
                    React.success(result.msg, () =>{
                        OnRefresh() //重新刷新列表
                    })
                }
                else
                {
                    React.error(result.msg)
                }
            }
        }).catch(() => {})
    }

    return (
        <>
            <link rel="stylesheet" href="/assets/css/guest.css" />
            <div className="list">
                <React.UI.PullToRefresh onRefresh={OnRefresh}>
                    <React.UI.List>
                        {
                            list.map((item:any) =>{
                                return(
                                    <React.UI.SwipeAction rightActions={rightBtn} onAction={() => GuestDelete(item.id)} key={item.id}>
                                        <React.UI.List.Item description={item.mobile} clickable onClick={() => React.navigate(`/guest/edit?gid=${item.id}`)}>
                                            {item.nickname}{item.gender == '1' ? '(男)' : '(女)'}
                                        </React.UI.List.Item>
                                    </React.UI.SwipeAction>
                                )
                            })
                        }
                    </React.UI.List>

                    {/* 列表滚动到底部自动加载更多数据。 */}
                    <React.UI.InfiniteScroll loadMore={loadMore} hasMore={hasMore} />
                </React.UI.PullToRefresh>
            </div>
            <div className="addguest">
                <React.Router.NavLink to="/guest/add" >添加住客</React.Router.NavLink>
            </div>
        </>
    )
}
export default GuestIndex;